@mixin colorBtn($color) {
  color: $color;

  &:hover {
    color: $color;

    &:before,
    &:after {
      background: $color;
    }
  }
}

.ibtn-red {
  @include colorBtn($red);
}
.ibtn-red-light {
  @include colorBtn($red-light);
}
.ibtn-red-dark {
  @include colorBtn($red-dark);
}

.ibtn-green {
  @include colorBtn($green);
}
.ibtn-green-light {
  @include colorBtn($green-light);
}
.ibtn-green-dark {
  @include colorBtn($green-dark);
}

.ibtn-blue {
  @include colorBtn($blue);
}
.ibtn-blue-light {
  @include colorBtn($blue-light);
}
.ibtn-blue-dark {
  @include colorBtn($blue-dark);
}

.ibtn-pink {
  @include colorBtn($pink);
}
.ibtn-pink-light {
  @include colorBtn($pink-light);
}
.ibtn-pink-dark {
  @include colorBtn($pink-dark);
}

.ibtn-tiffany {
  @include colorBtn($tiffany);
}
.ibtn-tiffany-light {
  @include colorBtn($tiffany-light);
}
.ibtn-tiffany-dark {
  @include colorBtn($tiffany-dark);
}

.ibtn-yellow {
  @include colorBtn($yellow);
}
.ibtn-yellow-light {
  @include colorBtn($yellow-light);
}
.ibtn-yellow-dark {
  @include colorBtn($yellow-dark);
}

// el-table 里的编辑删除按钮
// box-sizing: content-box; 宽度和高度不包括内边距和边框
// box-sizing：border-box; 宽度和高度包括内边距和边框
.el-table {
  .wrapper-op {
    display: flex;
    align-items: center;
    justify-content: center;

    .ibtn {
      display: flex;
      align-items: center;
      .el-icon {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .ibtn + .ibtn {
      margin-left: 0.3rem;
    }
    .ibtn-show {
      .el-icon {
        color: #90b07a;
      }
    }
    .ibtn-edit {
      .el-icon {
        color: $green-dark;
      }
    }
    .ibtn-del {
      .el-icon {
        color: $red;
      }
    }
    .ibtn-save {
      .el-icon {
        color: #03a333;
      }
    }
    .ibtn-cancel {
      .el-icon {
        color: #6b6b6b;
      }
    }
  }
}

.el-button + .el-button {
  margin-left: 6px;
}
